<template>
  <el-main>
    <Navbar></Navbar>
    <!--  条件栏  -->
    <el-row>
      <el-col :span="24">
        <el-input v-model="queryPageBean.queryString" placeholder="档案号/姓名/手机号" style="width: 200px;"></el-input>
        <el-button @click="findPage(queryPageBean)">查询</el-button>
        <el-button type="primary" @click="handleAddPage">新建</el-button>
      </el-col>
    </el-row>
    <!--    表格-->
    <Table :table-data="page.records" :table-head="tableHead" :operation="operation"></Table>
    <!--    分页组件-->
    <!-- <div>
      currentPage: {{ queryPageBean.currentPage }}, 
      pageSize: {{ queryPageBean.pageSize }}, 
      total: {{ page.total }}
    </div> -->
    <el-pagination
        align="right"
        @current-change="handleCurrentChange"
        :current-page="queryPageBean.currentPage"
        :page-size="queryPageBean.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="page.total">
    </el-pagination>
    <!--    新建会员档案的页面-->
    <el-dialog title="新建会员档案信息" :visible.sync="dialogFormVisibleAdd">
      <el-form :model="formData" label-position="top">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="档案号" prop="fileNumber">
              <el-input v-model="formData.fileNumber"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="formData.name"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-select v-model="formData.sex">
                <el-option label="不限" value="0"></el-option>
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号码">
              <el-input v-model="formData.idCard"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码">
              <el-input v-model="formData.phoneNumber"/>
            </el-form-item>
          </el-col>
<!--          <el-col :span="12">-->
<!--            <el-form-item label="类型" prop="type">-->
<!--              <el-select v-model="formData.type">-->
<!--                <el-option label="检查" value="1"></el-option>-->
<!--                <el-option label="检验" value="2"></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :span="12">
            <el-form-item label="邮箱">
              <el-input v-model="formData.email"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出生日期">
              <el-date-picker placeholder="选择日期" v-model="formData.birthday" type="date"></el-date-picker>
            </el-form-item>
          </el-col>
<!--          <el-col :span="12">-->
<!--            <el-form-item label="注册日期">-->
<!--              <el-date-picker placeholder="选择日期" v-model="formData.regTime" type="date" readonly></el-date-picker>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="formData.remark" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd">确 定</el-button>
      </div>
    </el-dialog>

    <!--  编辑会员管理的界面-->
    <el-dialog title="编辑会员档案信息" :visible.sync="dialogFormVisibleEdit">
      <el-form :model="formData" label-position="top">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="档案号" prop="fileNumber">
              <el-input v-model="formData.fileNumber"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="formData.name"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-select v-model="formData.sex">
                <el-option label="不限" value="0"></el-option>
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号码">
              <el-input v-model="formData.idCard"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码">
              <el-input v-model="formData.phoneNumber"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱">
              <el-input v-model="formData.email"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出生日期">
              <el-date-picker placeholder="选择日期" v-model="formData.birthday" type="date"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="formData.remark" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit">确 定</el-button>
      </div>
    </el-dialog>
  </el-main>

</template>

<script>
import Table from "@/components/Table.vue"
import {getMemberProfiles, addMemberProfile, deleteMemberProfile, editMemberProfile} from "@/api"

export default {
  data() {
    return {
      tableHead: [],  // 表头
      operation: [],  // 操作
      queryPageBean: {  // 分页查询条件
        currentPage: 1, // 当前页
        pageSize: 10,   // 每页记录数
        queryString: '',// 查询条件
      },
      page: {
        total:0,
        records:[]
      },       // 后端分页对象
      dialogFormVisibleAdd: false, // 新增框显示(新建)
      dialogFormVisibleEdit: false, // 新增框显示(编辑)
      formData: {},   // 表单数据
    }
  },
  watch: {
    // 监听查询条件变化
    'queryPageBean.queryString': {
      handler(newValue, oldValue) {
        this.queryPageBean.currentPage = 1 // 将页数设为1
      },
      immediate: true
    }
  },
  methods: {
    //编辑会员档案
    handleEdit() {
      editMemberProfile(this.formData).then((res) => {
        if (res.data.flag) {
          this.$message({
            message: res.data.message,
            type: 'success'
          })
          this.findPage()
          this.dialogFormVisibleEdit = false
        }else {
          this.$message.error(res.data.message)
        }
        })
      // this.dialogFormVisibleEdit = true
      //在编辑页面点击确定后的操作

    },

    // 弹出新增窗口
    handleAddPage() {
      // this.formData.regTime = new Date()
      this.dialogFormVisibleAdd = true
    },
    // 新增会员档案
    handleAdd() {
      addMemberProfile(this.formData).then((res) => {
        if (res.data.flag) {
          this.$message({
            message: res.data.message,
            type: 'success'
          })
          this.findPage()
          this.dialogFormVisibleAdd = false
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 查询检查项
    findPage(pageQueryBean) {
      getMemberProfiles(pageQueryBean ? pageQueryBean : this.queryPageBean).then((res) => {
        console.log(res.data.data.total)
        this.page.total = res.data.data.total
        this.page.records = res.data.data.records
        // 为性别转义
        let checkItems = this.page.records;
        for(let index in checkItems) {
          let checkItem = checkItems[index]
          let gender = ''
          switch (checkItem.sex) {
            case '1':
              gender = '男'
              break
            case '2':
              gender = '女'
              break
            default:
              gender = '不限'
          }
          checkItem.sex = gender
        }
      })
    }
    ,
    // 当前页发生变化
    handleCurrentChange(val) {
      this.queryPageBean.currentPage = val
      this.findPage()
    }
    ,
  }
  ,
  created() {
    // 自定义操作
    this.operation = [
      {
        type: 'primary',
        name: '编辑',
        action: (row) => {
          //点按编辑的操作
          this.formData = row
          this.dialogFormVisibleEdit = true
          console.log(row.id)
        },
        isDisabled: (row) => {
          return false
        }
      }, {
        type: 'danger',
        name: '删除',
        isDisabled: (row) => {
          return false
        },
        action: (row, index) => {
          this.$confirm('你确定要删除当前数据吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteMemberProfile({id: row.id}).then((res) => {
              if (res.data.flag) {
                this.$message({
                  message: res.data.message,
                  type: 'success'
                })
                console.log(index)
                this.$delete(this.page.records, index)
              } else {
                this.$message.error(res.data.message)
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
      }
    ]
    // 自定义表头
    this.tableHead = [
      {
        name: '档案号',
        prop: 'fileNumber'
      }, {
        name: '姓名',
        prop: 'name'
      }, {
        name: '性别',
        prop: 'sex'
      }, {
        name: '身份证号',
        prop: 'idCard'
      }, {
        name: '手机号',
        prop: 'phoneNumber'
      }, {
        name: '注册时间',
        prop: 'regTime'
      }, {
        name: '备注',
        prop: 'remark'
      }
    ]
    // 获取检查项
    this.findPage()
  }
  ,
  components: {
    Table,
  }
}
</script>

<style lang="less">

</style>